<template>
  <div class="home">
    <el-container>
      <el-header>
        <!--头部搜索-->
        <div class="header-set">
          <el-row>
            <el-col span="8">
              <div class="c1">
                <a href="">
                  <img src="../assets/images/logo.png" width="180" style="margin-top: -10px">
                </a>
              </div>
            </el-col>
            <el-col span="8">
              <div class="c1">
                <el-input type="text" style="margin-top: 20px" placeholder="输入汽车品牌或车型..." v-model="userInput">
                  <el-button slot="append" icon="el-icon-search" style="font-size: 20px"></el-button>
                </el-input>
              </div>
            </el-col>
            <el-col span="8">
              <div class="c1" v-if="user==null">
                <el-menu style="float: right;right: 100px"
                         router
                         :default-active="activeIndex" mode="horizontal" @select="handleSelect">
                  <el-submenu index="1">
                    <template slot="title">登录</template>
                    <el-menu-item @click="dialogFormVisible = true">登录</el-menu-item>
                    <el-menu-item index="/reg">免费注册</el-menu-item>
                  </el-submenu>
                </el-menu>
              </div>
              <div class="login-user" v-else>
                <span class="welcome">欢迎回来，<b>{{ currentUserName }}user</b>！</span>
                <el-dropdown @command="handleCommand">
                  <el-avatar shape="square" size="medium" :src="currentUserAvatar"></el-avatar>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-document" command="openEditInfoDialog">个人信息</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-lock" command="openEditPasswordDialog">修改密码</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-right" divided command="openLogoutConfirm">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>
        <!--菜单-->
        <div class="header-set" style="height: 70px">
          <el-menu router :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                   text-color="#fff" background-color="#545c64"
                   active-text-color="#f29718" style="font-weight: bold;">
            <!--菜单项-->
            <el-menu-item index="/product/main">首页</el-menu-item>
            <el-menu-item index="/product/car-list">买车</el-menu-item>
            <el-menu-item index="/user-center/add-new-car">卖车</el-menu-item>
            <el-menu-item index="/product/es/car-list">分期购车</el-menu-item>
            <el-menu-item index="5">新车</el-menu-item>
            <el-menu-item index="6">评估</el-menu-item>
            <el-menu-item index="7">问答</el-menu-item>
            <el-menu-item index="8">新闻</el-menu-item>
            <el-menu-item index="9">车型</el-menu-item>
            <el-menu-item index="10">工具</el-menu-item>
          </el-menu>
        </div>
      </el-header>

      <div>
        <router-view/>
      </div>


      <el-footer>
        <div style="background-color: #202024;text-align: center;color: #fff;padding: 50px 0">
          <div style="width: 1200px;height: 100px;margin: 5px auto;background-color: #202024;">
            <el-row>
              <el-col span="8">
                <p>毛孔二手车版权所有,致电10086</p>
                <p>致力于优质二手车</p>
                <p>更多详情www.MaoKong.com</p>
                <p>中山中心jsd2303</p>
              </el-col>
              <el-col span="8">
                <img src="../assets/images/Gu1.png" style="width:100px">
                <p style="color: #ef7c00">更多详情联系微信</p>
              </el-col>
              <el-col span="8">
                <img src="../assets/images/Gu2.png" style="width:100px">
                <p>更多详情联系微信</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-footer>
    </el-container>

    <!--弹出登录框    -->
    <el-dialog :visible.sync="dialogFormVisible" width="978px">
      <div class="reg-box">
        <div class="image"><img src="../assets/images/login.png" width="100%"></div>
        <div class="form">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="快捷登陆" name="first">
              <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="0" class="demo-ruleForm">
                <el-form-item prop="phone">
                  <el-input v-model="loginForm.phone" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item gutter="10">
                  <el-input style="width: 70%;"></el-input>
                  <el-button style="width: 30%;" type="warning">验证码</el-button>
                </el-form-item>
                <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="密码登陆" name="second">
              <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="0px" class="demo-ruleForm">
                <el-form-item prop="username">
                  <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input v-model="loginForm.password" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item prop="QRcode">
                  <el-input v-model="loginForm.QRcode" placeholder="图片验证码"></el-input>
                </el-form-item>
                <el-button type="primary" @click="login('loginForm')">登录</el-button>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <el-divider></el-divider>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">注册</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '/product/main',
      activeIndex2: '1',
      activeName: 'first',
      dialogFormVisible: false,
      user: localStorage.user ? JSON.parse(localStorage.user) : null,
      currentUserId:'',
      currentUserName: '',
      currentUserAvatar: '',
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '请输入11位的手机号', trigger: 'blur'}
        ],
        username: [
          {required: true, message: '请输入用戶名', trigger: 'blur'},
          {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密碼', trigger: 'blur'},
          {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
        ],
        QRcode: [
          {required: false, message: '请输入验证码', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    handleCommand(command) {
      if (command == 'openEditInfoDialog') {
        this.openEditInfoDialog();
      } else if (command == 'openEditPasswordDialog') {
        location.href='/user-center/user-update-password';
      } else if (command == 'openLogoutConfirm') {
        this.logout();
      }
    },
    handleActiveMenuItem(){
      let path = this.$router.currentRoute.path;
      this.activeIndex = path;
    },
    handleSelect(key, keyPath) {//key代表的是上面index的值
      console.log(key, keyPath);
    },
    login(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = '/xiaoming-sso/account/user/login';
          console.log('url = ' + url);
          this.http.post(url, this.loginForm).then(function (response) {
            let jsonResult = response.data;
            if (jsonResult.state == 20000) {
              console.log(jsonResult);
              // 存登陆用户信息
              let loginResult=jsonResult.data;
              localStorage.user = JSON.stringify(jsonResult.data);
              localStorage.setItem('localJwt', loginResult.token);
              localStorage.setItem('currentUserId', loginResult.id);
              localStorage.setItem('currentUserName', loginResult.username);
              localStorage.setItem('currentUserAvatar', loginResult.avatar);
              that.$message({
                message: '登录成功！',
                type: 'success'
              });
              that.currentUserName = loginResult.username;
              that.currentUserAvatar = localStorage.getItem('currentUserAvatar');
              that.dialogFormVisible=false;
              location.reload();
            } else {
              that.$message.error(jsonResult.message);
            }
          })
        }
      })
    },
    logout(){
      if (confirm("您确认退出登录吗?")){
        localStorage.clear();//清空登录成功时保存的数据
        location.reload();
      }
    },
  },
  mounted() {//这个跟created一样也是打开页面就会
    //先有created再有mounted，习惯用这个多
    //处理菜单
    this.handleActiveMenuItem();
  }
}
</script>


<style scoped>

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}

el-input {
  margin-left: 0;
}

#loginButton {
  width: 100%;
  background-color: #f29600;
}

.reg-box {
  width: 809px;
  height: 361px;
  margin: 0 65px;
  overflow: hidden;
}

.image {
  width: 406px;
  height: 293px;
  float: left;
}

.form {
  margin-left: 100px;
  width: 300px;
  height: 252px;
  float: left;
}
</style>